<template>
  <div>
    <div class="rec_content">
      <div class="rec_item" v-for="(item,index) in recommendList" :key="index">
        <div class="rec_img">
          <img v-lazy="item.pic" alt />
        </div>
        <div class="rec_text">
          <div>
            <div class="te_img">
              <img v-lazy="item.method_icon" alt />
            </div>
            {{item.name}}
          </div>
        </div>
        <div class="rec_time">{{setShowTime(index)}}</div>
        <div class="rec_money">
          <span>￥{{item.min_price}}</span>
          <i>起</i>
        </div>
        <div class="rec_type">{{item.support_desc[0]}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState("main", ["recommendList"]),
    setShowTime() {
      return function (index) {
        //this.recommendList.show_time_data
        let arrTime = this.recommendList[index].show_time_data;
        let satrTime = arrTime[0];
        let endTime = arrTime[arrTime.length - 1];
        return satrTime + "-" + endTime;
      };
    },
  },
  mounted() {
   
  },
};
</script>

<style lang='scss' scoped>
.rec_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.2rem 0.1rem 0 0.25rem;
  .rec_item {
    border: 0.02rem solid #666;
    width: 45%;
    margin-right: 0.15rem;
    margin-bottom: 0.2rem;
    .rec_img {
      height: 3.6rem;
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .rec_text {
      margin-bottom: 0.1rem;
      display: flex;
      font-size: 0.2rem;
      padding: 0 0.1rem;
      text-align: left;
      .te_img {
        height: 0.26rem;
        // width: .46rem;
        display: inline-block;
        img {
          height: 0.26rem;
          // width: 100%;
        }
      }
    }
    .rec_time {
      font-size: 0.14rem;
      padding: 0 0.1rem;
    }
    .rec_money {
      font-size: 0.3rem;
      padding: 0 0.1rem;
      color: #666;
      span {
        color: orangered;
      }
      i {
        font-size: 0.24rem;
      }
    }
    .rec_type {
      font-size: 0.24rem;
      color: orangered;
      padding: 0 0.1rem;
    }
  }
}
</style>
